const template = document.createElement('template');
template.innerHTML = `
<style>
  div {
    border: 2px solid hsl(180, 100%, 50%);
    margin-top: 1em;
    padding: 1em;
  }
  h1 {
    color: hsl(210, 100%, 50%);
    font-size: 3rem;
  }
  button {
    padding: 1em;
    border: none;
    border-radius: 4px;
    background-color: hsl(180, 80%, 30%);
    color: white;
    font-weight: bold;
    font-size: 1.2em;
  }

  slot[name="child"] {
    color: red;
    font-size: 1.2em;
  }

  p.counter {
    font-size: 2em;
  }

</style>
<div>
  <h1>hello world</h1>

  <slot name="child"></slot>

  <p class="counter"></p>

  <button>Click</button>
</div>
`;

class Card extends HTMLElement {
  constructor() {
    super();

    // state
    this.counter = 0;

    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    
    // attribute
    this.shadowRoot.querySelector('h1').innerHTML = this.getAttribute('title');
  }

  onClick () {
    // alert(`clicked`);

    this.counter++;
    const counter = this.shadowRoot.querySelector('.counter');
    counter.innerText = this.counter.toString();
    // counter.style.display = (this.counter % 2) ? 'block' : 'none';
  }
  // lifecycle
  connectedCallback() {
    this.shadowRoot.querySelector('button').addEventListener('click', () => this.onClick())
  }
  disconnectedCallback() {
    this.shadowRoot.querySelector('button').removeEventListener()
  }
  attributeChangedCallback(propName, oldVal, newVal) {
    alert(propName, oldVal, newVal)
  }
}

window.customElements.define('wc-card', Card);
